* {
    box-sizing: border-box; /* 全局统一盒模型 */
}
.content{
    width: 100%;
    height: 780px;
    background-color: grey;
}

/*左半部分样式*/
.leftSide{
    height: 100%;
    width: 20%;
    background-color: #2c3e50;
    border-right: 3px solid black;

}

/*主页样式*/
.leftSide .home {
    width: 100%;
    height: 57px;
    background-color: rgba(23, 29, 37, 0.7); /* 换一个更贴合深色主题的颜色，替代 bisque */
    display: flex; /* 配合 myFlex-x，确保子元素弹性布局，假设 myFlex-x 是 flex 布局，这里明确写出来 */
    align-items: center; /* 垂直居中子元素 */
    justify-content: space-between; /* 让左右部分两端对齐 */
    padding: 0 8px; /* 增加内边距，让内容不贴边 */
    box-sizing: border-box; /* 盒模型计算更合理 */
}
.leftSide .home .left {
    width: 82%;
    height: 65%;
    display: flex;
    align-items: center; /* 让“首页”文字垂直居中 */
    color: #fff; /* 文字白色，贴合深色背景 */
    font-size: 14px;
    background-color: #2c3e50;
    padding-left: 5px;
    border-radius: 3px;
}

/* 右侧容器样式 */
.leftSide .home .right {
    width: 15%;
    height: 90%;
    display: flex;
    justify-content: flex-end; /* 让按钮靠右 */
}

/* 按钮样式 */
.leftSide .home .right .button {
    position: relative;
    width: 24px; /* 固定宽度，避免因父级宽度变化导致显示异常，根据图标实际尺寸调整 */
    height: 24px;
    background-image: url("@/assets/img/收藏.png");
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer; /* 鼠标悬浮变手型，提示可交互 */
    z-index: 2;
    margin-top: 12px;
}
.leftSide .home .right .button:hover {
    background-image: url("@/assets/img/收藏_hover.png"); /* 如有hover态图标 */
    transform: scale(1.1); /* 稍微放大，增强交互反馈 */
    transition: all 0.2s ease; /* 过渡效果更丝滑 */
}

/*分类下拉框*/
.leftSide > .sort {
    width: 100%;
    height: 57px;
    background-color: #2c3e50;
    position: relative; /* 为下拉框提供定位参考 */
    padding-left: 3px;
}

/* 左侧文字区域 - 修改部分 */
.leftSide > .sort > .left {
    width: 75%;
    height: 80%; /* 修改：使用 100% 高度 */
    background-color: rgb(37, 39, 44);
    color: white;
    display: flex; /* 添加：启用 Flex 布局 */
    align-items: center; /* 添加：垂直居中 */
    padding-left: 13px; /* 添加：左侧内边距 */
    box-sizing: border-box; /* 添加：盒模型计算方式 */
    border-radius: 8px;

}

.leftSide>.sort>.left:hover{
    background-color: rgb(62, 64, 71);

}
/* 右侧图标区域 */
.leftSide > .sort > .right {
    width: 20%;
    display: flex;
    align-items: center; /* 垂直居中图标 */
    justify-content: flex-end; /* 靠右对齐 */
    padding-right: 12px; /* 右侧内边距 */
}
.leftSide>.sort>.right>img:nth-child(1){
    height: 25%;
    width: 25%;
    margin-left: 5px;
    margin-right: 10px;
}
.leftSide>.sort>.right>img:nth-child(2){
    height: 25%;
    width: 29%;
}
/* 下拉菜单容器 */
.showList {
    position: absolute;
    top: 57px; /* 保持与 .sort 高度一致 */
    left: 3px;
    width: 284px;
    background-color: #2c3e50; /* 深色背景 */
    color: #fff;
    font-size: 14px;
    border: 1px solid #3a536b;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    margin-left: 8px;
    box-sizing: border-box;
}

.showList>.item {
    display: flex;
    align-items: flex-start;        /* 垂直居中 */
    justify-content: center;/* 水平居左（复选框在前） */
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.leftSide>.search{
    width:100%;
    height: 55px;

}
.search-input {
    width: 80%;
    height: 80%;
    flex: 1;
    border: 1px solid #3a536b;
    border-radius:8px;
    background-color: rgb(37, 39, 44);
    color: #fff;
    font-size: 14px;
    outline: none;
    margin-left: 3px;
    margin-right: 10px;
    padding-left: 10px;
}

/*游戏列表*/
.leftSide>.list{
    width:100%;
    height: 680px;
}
.leftSide>.list>.list-view{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;

}
.leftSide>.list>.list-view>.item1{
    color: rgb(200, 226, 249);
    width: 100%;
    height: 25px;
    margin-left: 10px;
}
.leftSide>.list>.list-view>.item{
    color: rgb(133, 140, 153);
    width: 100%;
    height: 30px;
    margin-left: 35px;
    margin-top: 5px;
}

.leftSide>.list>.list-view>.item img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.rightSide{
    padding-top:  10px;
    height: 100%;
    width: 80%;
    background-color: rgb(36, 40, 47);
}
.rightSide>.allGame{
    margin: 30px;
    padding-left: 30px;
    height: 100%;
    width: 100%;
}
.allGame-list{
    width: 100%;
    height: 88%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.allGame-list>.gameItem{
    width: 170px;
    height: 280px;
    margin-left: 22px;
    margin-right: 22px;
    margin-top: 22px;
}
.el-pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
